<template>
  <div>整合 style animation</div>
  <div>
    测试 同级下 animation 变换 一个 css 变量 是否会引起 其他class 的 变化
  </div>
  <div class="width_ab"></div>
  <div class="posi_b"></div>
  <div class="a"></div>
</template>

<script setup>
import { mergeAnima } from '../../../components/aaanewApp/global/element/styleTag/styleFuncs/mergeAnimation';
import { onMounted } from 'vue';
import { SetStaticCssTxtFunc } from '../../../components/aaanewApp/global/globalStyleFunc/setStaticCssTxtFunc';
import { wid_A, pos_B } from './mergeAnima';
import { ObjectOnlyPushSet } from '../../../components/aaanewApp/global/global';
onMounted(() => {
  let StaticCss = SetStaticCssTxtFunc('mergeAnima');
  StaticCss('merge_a', wid_A);
  StaticCss('merge_b', pos_B);

  let mergeStyleEl_a = document.getElementById('merge_a');
  let mergeStyleEl_b = document.getElementById('merge_b');
  let ap = { data: ['op'] };
  ObjectOnlyPushSet(ap, 'op', { qwe: 'qwe' });
  console.log(ap);
  mergeAnima(mergeStyleEl_a, mergeStyleEl_b);
});
</script>

<style scoped lang="scss"></style>

<style>
.width_ab {
  height: 60px;
  background-color: chartreuse;
  animation-name: wid_Ab;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes wid_Ab {
  from {
    width: 100px;
  }
  to {
    height: 600px;
    width: 300px;
  }
}
.posi_b {
  position: absolute;
  width: 100px;
  height: 70px;
  animation-name: pos_B;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: linear;
}

@keyframes pos_B {
  0% {
    left: 200px;
    top: 300px;
  }
  50% {
    background-color: #3212b4;
    left: 600px;
    top: 700px;
  }
  100% {
    left: 300px;
    top: 400px;
  }
}
</style>
